<template>
  <div class="swiper">
    <div class="swipe-wrap">
        <router-link v-for="(item,index) in data" :key="index" class="swipe-item"
         :to="'/bookdetail/'+item.id">
          <book-item :CPNgrade="item.grade" :CPNimgurl="item.img">
            <span slot="name">{{item.book}}</span>
          </book-item>
        </router-link>
    </div>
  </div>
</template>

<script>
import BookItem from '@/components/BookItem.vue'
export default {
  components:{
    BookItem
  },
  data(){
    return {
      
    }
  },
  props:{
    data:Array
  }
}
</script>

<style>
.swiper{
  height: 179px;
  overflow: hidden;
}
.swipe-wrap{
  padding: 0 15px;
  padding-bottom: 10px;
  white-space: nowrap;
  overflow-x: scroll;
}
.swipe-item{
  display: inline-block;
  width: 100px;
  margin-right: 10px;
}

</style>